<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <ul>
      <input type="text" v-model="thing">
      <button v-on:click="add">添加</button>
      <li v-for="(todo,index) in todos" :id="index" :class="{done:todo.done}">
        <label>{{index + 1}}.{{ todo.value }}</label>
        <time>{{todo.created|date}}</time>
      </li>
    </ul>
    <todo :total="todos.length" :done="done" />
  </div>
</template>
<script>


  import todo from './todo.vue'
  export default {
  name: 'app',
  components:{todo},
  methods: {
    add: function () {
      this.todos.push({value:this.thing, done: false,created:Date.now()})
    }
  },
  data () {
    return {
      thing:null,
      title:'vue-todos',
      todos:[{value:"阅读一本关于前端开发的书",done:false,created:Date.now()},
        {value:"补充范例代码",done:true,created:Date.now()},
        {value:"写心得",done:false,created:Date.now()}],
        msg:'vue-todos'
    }
  },
  filters:{
    date(val){
      return new Date(val).getHours()+":"+new Date(val).getMinutes()+":"+new Date(val).getSeconds()
    }
  },
  computed:{
    done:function(){
      var count=0;
      for(var i=0;i<this.todos.length;i++){
        if(!this.todos[i].done){
          count++;
        }
      }
      return count;
    }
  }
}
</script>

<style>
  .done{text-decoration: line-through}
</style>